<template>
    <tm-app color="#EFE8DD">
        <Navbar :shadow="0" :fontSize="40" color="#EFE8DD" title="" />
        <view class="content">
            <view class="info">
                <tm-avatar linear="top" :size="112" :round="26" :font-size="26"
                    :label="userInfo?.name || ''"></tm-avatar>
                <view class="ml-28">
                    <tm-text :font-size="40" _class="text-weight-b" color="#444444"
                        :label="userInfo?.name || ''"></tm-text>
                    <tm-text :font-size="24" color="#444444" :label="phone"></tm-text>
                </view>
            </view>
            <view class="package-list">
                <view @click="handleChangePackage(1)" :class="{ actived: activedPackage === 1 }" class="package">
                    <tm-text :font-size="32" color="#444444" label="普通会员年卡"></tm-text>
                    <view class="flex flex-row-bottom-start">
                        <tm-text :font-size="28" color="#A37C3D" label="¥"></tm-text>
                        <tm-text :font-size="48" color="#A37C3D" label="199"></tm-text>
                    </view>
                </view>
                <view @click="handleChangePackage(2)" :class="{ actived: activedPackage === 2 }" class="package">
                    <tm-text :font-size="32" color="#444444" label="超级会员年卡"></tm-text>
                    <view class="flex flex-row-bottom-start">
                        <tm-text :font-size="28" color="#A37C3D" label="¥"></tm-text>
                        <tm-text :font-size="48" color="#A37C3D" label="599"></tm-text>
                    </view>
                </view>
            </view>
            <view class="flex flex-row-center-center">
                <view class="flex">
                    <tm-text :font-size="32" color="#444444" label="已有会员激活码？"></tm-text>
                    <tm-text @click="navigateTo(pageLink.vipActivated)" :font-size="32" color="#A37C3D"
                        label="去激活会员>"></tm-text>
                </view>
            </view>
            <view class="mt-40">
                <tm-text :font-size="40" color="#A37C3D" label="会员权益对比"></tm-text>
            </view>
            <view class="mt-20">
                <table class="diff-table">
                    <thead>
                        <tr>
                            <td>特权</td>
                            <td>无会员</td>
                            <td :class="{ actived: activedPackage === 1 }">
                                <view class="flex flex-row-center-center">
                                    <tm-icon color="#A56A2D" :fontSize="24" name="tmicon-huiyuan1"></tm-icon>
                                    <view class="ml-10">普通会员</view>
                                </view>
                            </td>
                            <td :class="{ actived: activedPackage === 2 }">
                                <view class="flex flex-row-center-center">
                                    <tm-icon color="#A56A2D" :fontSize="24" name="tmicon-huiyuan1"></tm-icon>
                                    <view class="ml-10">超级会员</view>
                                </view>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <view class="flex flex-row-center-center">
                                    <tm-icon color="#F3D784" :fontSize="24" name="tmicon-icon"></tm-icon>
                                    <view class="ml-10">问事</view>
                                </view>
                            </td>
                            <td>
                                <tm-icon color="#A6A6A6" :fontSize="24" name="tmicon-times"></tm-icon>
                            </td>
                            <td :class="{ actived: activedPackage === 1 }">每日1次</td>
                            <td :class="{ actived: activedPackage === 2 }">每日10次</td>
                        </tr>
                        <tr>
                            <td>
                                <view class="flex flex-row-center-center">
                                    <tm-icon color="#F3D784" :fontSize="24" name="tmicon-icon"></tm-icon>
                                    <view class="ml-10">运势</view>
                                </view>
                            </td>
                            <td>
                                <tm-icon color="#A6A6A6" :fontSize="24" name="tmicon-times"></tm-icon>
                            </td>
                            <td :class="{ actived: activedPackage === 1 }">
                                <tm-icon color="#A56A2D" :fontSize="24" name="tmicon-check"></tm-icon>
                            </td>
                            <td :class="{ actived: activedPackage === 2 }">
                                <tm-icon color="#A56A2D" :fontSize="24" name="tmicon-check"></tm-icon>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <view class="flex flex-row-center-center">
                                    <tm-icon color="#F3D784" :fontSize="24" name="tmicon-icon"></tm-icon>
                                    <view class="ml-10">祈福</view>
                                </view>
                            </td>
                            <td>
                                <tm-icon color="#A6A6A6" :fontSize="24" name="tmicon-times"></tm-icon>
                            </td>
                            <td :class="{ actived: activedPackage === 1 }">
                                <tm-icon color="#A56A2D" :fontSize="24" name="tmicon-check"></tm-icon>
                            </td>
                            <td :class="{ actived: activedPackage === 2 }">
                                <tm-icon color="#A56A2D" :fontSize="24" name="tmicon-check"></tm-icon>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <view class="flex flex-row-center-center">
                                    <tm-icon color="#F3D784" :fontSize="24" name="tmicon-icon"></tm-icon>
                                    <view class="ml-10">历史数据</view>
                                </view>
                            </td>
                            <td>
                                <tm-icon color="#A6A6A6" :fontSize="24" name="tmicon-times"></tm-icon>
                            </td>
                            <td :class="{ actived: activedPackage === 1 }">
                                <tm-icon color="#A56A2D" :fontSize="24" name="tmicon-check"></tm-icon>
                            </td>
                            <td :class="{ actived: activedPackage === 2 }">
                                <tm-icon color="#A56A2D" :fontSize="24" name="tmicon-check"></tm-icon>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </view>
            <view class="mt-n20">
                <ImageButtom @click="payDrawer = true" class="pay-btn" :image="BtnBg">
                    <tm-text :font-size="32" color="#fff" label="￥199 立即支付"></tm-text>
                </ImageButtom>
            </view>
            <tm-checkbox v-model="protocolChecked" class="protocol" :round="25" :size="26" :fontSize="24">
                <view class="protocol-text">
                    <span>我已阅读并同意</span>
                    <span class="color" @click.stop="navigateTo(pageLink.protocolUser)">《用户协议》</span>
                </view>
            </tm-checkbox>
        </view>

        <tm-drawer :overlayClick="false" hideHeader placement="bottom" v-model:show="payDrawer">
            <view class="pa-40">
                <view class="flex flex-row-center-start">
                    <tm-icon name="tmicon-times" @click="payDrawer = false"></tm-icon>
                </view>
                <view class="flex flex-col flex-row-center-center">
                    <tm-text :font-size="32" color="#000" label="立即支付"></tm-text>
                    <tm-text :font-size="64" color="#000" label="￥199"></tm-text>
                </view>
                <view>
                    <tm-radio-group class="pay-radio" direction="customCol" v-model="radiolist"
                        :defaultValue="radiolist">
                        <tm-radio value="alipay">
                            <view class="flex flex-1 flex-row flex-row-start-center">
                                <tm-icon :fontSize="48" color="#06B4FD" name="tmicon-alipay"></tm-icon>
                                <tm-text class="ml-20" color="#000" label="支付宝"></tm-text>
                            </view>
                        </tm-radio>
                        <tm-radio value="weixin">
                            <view class="flex flex-1 flex-row flex-row-start-center">
                                <tm-icon :fontSize="48" color="#28C445" name="tmicon-weixinzhifu"></tm-icon>
                                <tm-text class="ml-20" color="#000" label="微信"></tm-text>
                            </view>
                        </tm-radio>
                    </tm-radio-group>
                </view>
                <view class="mt-n20">
                    <tm-button block label="确定支付"></tm-button>
                </view>
            </view>
        </tm-drawer>
    </tm-app>
</template>

<script lang="ts" setup>
    import { ref } from "vue"
    import Navbar from '@/components/navbar/index.vue';
    import { useUserStore } from "/stores/user.ts";
    import { storeToRefs } from 'pinia'
    import ImageButtom from '@/components/ImageButton/index.vue';
    import BtnBg from '/static/assets/images/common/btn-bg.png';
    import { pageLink } from '@/constants/link.ts'
    import { navigateTo } from '@/utils/index.ts'

    const userStore = useUserStore();

    const payDrawer = ref(true)

    const { phone = '', memberEcpiredDate = '', userInfo = {} } = storeToRefs(userStore)

    const activedPackage = ref(1)

    const handleChangePackage = (index: number) => {
        activedPackage.value = index
    }
</script>

<style lang="less" scoped>
    .content {
        padding: 0 26rpx;
        min-height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--navbar-height));
        background-image: url('/static/assets/images/index/year-bg.png');
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100% auto;

        .info {
            display: flex;
            align-items: center;
        }

        .package-list {
            display: flex;
            padding: 0 12rpx;
            margin-right: -16rpx;
            margin: 40rpx 0 24rpx;

            .package {
                padding: 28rpx 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-right: 16rpx;
                width: calc((100% - 16rpx) / 2);
                background-size: 100% 100%;
                background-image: url('/static/assets/images/my/vipDetail/bg2.png');

                &.actived {
                    background-image: url('/static/assets/images/my/vipDetail/bg1.png');
                }
            }
        }

        .diff-table {
            font-size: 24rpx;
            width: 100%;
            text-align: center;
            border-spacing: 0;
            border-radius: 12rpx;
            overflow: hidden;

            thead {
                td {
                    background-color: #F7F4E8;
                }
            }

            td {
                height: 92rpx;
                background-color: #FAF8F3;
                border: none;
                padding: 0;

                &.actived {
                    background: linear-gradient(to right, #FFF7E9, #FFF1C7);
                }
            }
        }

        .protocol {
            margin-top: 10rpx;
            justify-content: center;

            :deep(.checkbox-container) {
                align-items: flex-start !important;
                justify-content: center !important;

                .selector {
                    margin: 2rpx 12rpx !important;
                }
            }
        }

        .protocol-text {
            flex-wrap: wrap;
            font-size: 24rpx;

            .color {
                color: #A37C3D;
            }
        }
    }

    .pay-radio {
        :deep(.radio-button) {
            flex-direction: row-reverse !important;
            margin-bottom: 20rpx;
        }
    }

    .pay-btn {
        background-color: #A37C3D;
        color: #fff;
        width: 414rpx;
        height: 88rpx;
        margin: 0 auto;
    }
</style>